import React, { useState } from 'react'
import { useDispatch, useSelector } from "react-redux"
import Redux2 from "./Redux2";
import Redux3 from "./Redux3";
export default function Redux1() {

  // 使用 useDispatch 调用 action 修改数据
  const dispatch = useDispatch()

  // 使用 useSelector 来获取数据
  const current = useSelector((state) => {
    return state.count
  })
  console.log(current)
  // 传递给子组件的参数
  const perple = {
    count: '父组件传递的参数',
    age: 22
  }

  // 修改Redux中的数据
  const changeCurrentadd = () => {
    dispatch({
      type: 'add_count',
      current: '修改后的current'
    })
  }
  const changeCurrentsub = () => {
    dispatch({
      type: 'sub_count',
      current: '修改后的current'
    })
  }

  // 定义一个变量用于接收子组件传来的参数
  const [name, setName] = useState('等待接收Redux3的参数...')
  
  // 获取Redux3子组件传递的参数
  const ginseng = (props) => {
    console.log(props);
    setName(props) // 使用钩子函数（useState）给name赋值
    return props
  }

  return (
    <div style={{ border: '2px solid #000' }}>
      <h5>Redux1组件</h5>
      <h5>接收Redux3传递的参数：{name}</h5>
      <button onClick={changeCurrentadd}>count++</button>
      <button onClick={changeCurrentsub}>count--</button>
      <Redux2 />
      {/* 给子组件传参/接收子组件参数 */}
      <Redux3 perple={perple} ginseng={ginseng} />
    </div>
  )
}


// 函数组件父子传参：
// 父传子：
// 直接在子组件中添加要传递的内容：<Redux2 perple={perple}/>，子组件通过参数进行接收
// 子传父：
// 在父组件中定义一个函数，然后传递给子组件；在子元素中通过事件触发这个函数，将要传递的值当做参数放到这个函数中，当子组件中的事件触发后，在父元素中可以接收到子组件传递来的参数